<template>
    <el-container class="main-container">
        <el-aside width="200px" class="el-aside">
            <el-col>
                <el-image class="icon-img" :src="iconPath" style="width:60%;margin-top:30px;"></el-image>
                <el-menu
                class="el-menu-vertical-demo"
                background-color="#2b3a49"
                text-color="#fff"
                active-text-color="#66c6a3" style="margin-top:16px;border:0px;"
                @select="changeSidebar"
                :router="true"
                :default-active="barActivate">
                <el-menu-item index="/welcome">
                    <i class="el-icon-magic-stick"></i>
                    <span slot="title">KG TooL</span>
                </el-menu-item>
                <el-menu-item index="/mygraph">
                    <i class="el-icon-collection"></i>
                    <span slot="title">我的图谱</span>
                </el-menu-item>
                <el-submenu index="1">
                    <template slot="title">
                    <i class="el-icon-coin"></i>
                    <span>图谱构建</span>
                    </template>
                    <el-menu-item-group>
                    <el-menu-item index="/select">结构化</el-menu-item>
                    <el-menu-item index="/nonstructure">非结构化</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-menu-item index="/qa">
                    <i class="el-icon-chat-dot-square"></i>
                    <span slot="title">QA问答</span>
                </el-menu-item>
                <el-menu-item index="/test">
                    <i class="el-icon-setting"></i>
                    <span slot="title">建设中...</span>
                </el-menu-item>
                </el-menu>
            </el-col>    
        </el-aside>
        <transition name="fade">
            <router-view class="Router"></router-view>
        </transition>
        
    </el-container>
    
</template>

<script>
import axios from 'axios'
import icon_url from '@/assets/icon-2.png'
export default {
    name:"upload",
    data() {
        return {
            name: "上传文件",
            checkStatus: "",
            activeTab: 'first',
            iconPath:icon_url,
            transitionName:'',
            barActivate:'/welcome',
        }
    },
    methods: {
        getFileName(file){
            this.$store.state.fileName=file.name.substring(0,file.name.length-5);
        },
        goToNext(){
            this.$router.push({ path:'/panelDisease'})
        },
        changeSidebar(path){
            this.barActivate = path;
            this.$router.push(path);
        },
        
    },
}
</script>
<style scoped>
    .el-aside{
        background-color: #2b3a49;
    }
    
    .main{
        background-color: #f3f3f4;
        margin-top:80px;
    }
    .main-container{
        position:absolute;
        height:100%;
        width:100%;
    }
    .card-box{
        margin-top:100px;
    }
    .tab-title{
        color:#fff;
    }
    .Router {
      -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .fade-enter{
		opacity: 0;
    }
    .fade-enter-active{
        transition: opacity 0.75s;
    }
    .fade-leave-to{
        opacity: 0;
    }
    .fade-leave-active{
        opacity:0;
    }


</style>